<template>
  <div class="content-box">
    <!-- 搜索框 -->
    <el-card class="box-card">
      <div class="top">
        <div>
          <el-icon><ZoomIn /></el-icon>
          <span>筛选搜索</span>
        </div>
        <div>
          <el-button @click="reset">重置</el-button>
          <el-button type="primary" @click="searchfn">查询搜索</el-button>
        </div>
      </div>
      <div class="bottom">
        <div class="name">
          <span>优惠券名称: </span>
          <input v-model="keywordVal" placeholder="优惠券名称" />
        </div>
        <div class="type">
          <span>优惠券类型: </span>
          <el-select v-model="typeValue" clearable placeholder="全部">
            <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
    </el-card>
    <!-- 添加 -->
    <el-card class="add-card">
      <div>
        <el-icon>
          <Fold />
        </el-icon>
        <span>数据列表</span>
      </div>
      <div>
        <el-button @click="toAddCoupon">添加</el-button>
      </div>
    </el-card>
    <!-- 表格 -->
    <!-- 秒杀活动列表 -->
    <div class="table">
      <el-table
        :data="list"
        :cell-style="{ 'text-align': 'center' }"
        border
        ref="multipleTableRef"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="60" align="center">
        </el-table-column>
        <el-table-column
          align="center"
          prop="id"
          label="编号"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="优惠券名称"
        ></el-table-column>
        <el-table-column align="center" label="优惠券类型">
          <template #default="{ row }">
            <span v-if="row.type == 0">全场赠券</span>
            <span v-else-if="row.type == 1">会员赠券</span>
            <span v-else-if="row.type == 2">购物赠券</span>
            <span v-else="row.type == 3">注册赠券</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="可使用商品">
          <template #default="{ row }">
            <span v-if="row.useType == 0">全场通用</span>
            <span v-else-if="row.useType == 1">指定分类</span>
            <span v-else-if="row.useType == 2">指定商品</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="使用门槛">
          <template #default="scope">
            满{{ scope.row.minPoint }}元可用
          </template>
        </el-table-column>
        <el-table-column align="center" label="面值">
          <template #default="{ row }"> {{ row.amount }}元 </template>
        </el-table-column>
        <el-table-column align="center" prop="platform" label="适用平台">
          <template #default="{ row }">
            <span v-if="row.platform == 0">全平台</span>
            <span v-else-if="row.platform == 1">移动端</span>
            <span v-else-if="row.platform == 2">PC端</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="有效期">
          <template #default="{ row }">
            {{ formatDate(row.enableTime) }}至{{ formatDate(row.endTime) }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="amount" label="状态">
          <template #default> 已过期 </template>
        </el-table-column>
        <el-table-column align="center" prop="platform" label="操作">
          <template #default="scope">
            <div class="edit">
              <el-button
                size="small"
                text
                type="primary"
                @click="toCouponHistory(scope.row.id)"
                >查看</el-button
              >
              <el-button
                size="small"
                text
                type="primary"
                @click="toUpdateCoupon(scope.row.id, scope.row)"
                >编辑</el-button
              >
              <el-button
                size="small"
                text
                type="primary"
                @click="showDel(scope.row.id)"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        v-model:currentPage="paginate.currentPage"
        v-model:page-size="paginate.pageSize"
        :page-sizes="[5, 10, 15]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="paginate.total"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 删除确认弹框 -->
    <DelFlash
      :visible="delVisible"
      :delApi="delApi"
      :delId="delId"
      @close="closeDel"
    />
  </div>
</template>

<script setup lang="ts">
import { useTable } from "@/hook/table";
import * as http from "@/request/api";
import { Ref, ref } from "vue";
import dayjs from "dayjs";
import { useRouter } from "vue-router";
import DelFlash from "../flash/component/flashDel.vue";
const router = useRouter();
const keywordVal = ref("");
// 下拉筛选
const typeValue = ref();
const typeList = [
  {
    value: 0,
    label: "全场赠券",
  },
  {
    value: 1,
    label: "会员赠券",
  },
  {
    value: 2,
    label: "购物赠券",
  },
  {
    value: 3,
    label: "注册赠券",
  },
];

let { list, paginate, searchfn, handleSizeChange, handleCurrentChange } =
  useTable(http.coupon.getCouponList, {
    name: keywordVal,
    type: typeValue,
  });

const multipleSelection = ref<CouponList[]>([]);
const handleSelectionChange = (val: CouponList[]) => {
  multipleSelection.value = val;
};

// 点击跳转添加页面
function toAddCoupon() {
  router.push("/sms/addCoupon");
}

// 点击查看跳转到设置商品页面
function toCouponHistory(id: number) {
  router.push(`/sms/couponHistory?id=${id}`);
}

// 点击跳转编辑页面
function toUpdateCoupon(id: number, row: CouponList) {
  router.push(`/sms/updateCoupon?id=${id}`);
}

// 点击显示删除弹框
let delVisible = ref(false);
let delId = ref();
let delApi = http.coupon.CouponDelete;
function showDel(id: number) {
  delVisible.value = true;
  delId.value = id;
}
// 取消删除
function closeDel() {
  delVisible.value = false;
}

// 重置
function reset() {
  keywordVal.value = "";
}

// 格式化时间
function formatDate(date?: string) {
  if (!date) return "";
  return dayjs(date).format("YYYY-MM-DD HH:mm:ss");
}
</script>

<style>
.content-box {
  padding: 10px 20px;
  box-sizing: border-box;
  overflow-x: hidden;
}
.box-card {
  margin: 10px 0;
  height: 128px;
  font-size: 14px;
}

.box-card .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box-card .top span {
  margin: 0 8px;
}

.box-card .bottom {
  margin: 20px;
  display: flex;
}
.box-card .bottom .name {
  margin: 0 50px 0 10px;
}

.box-card .name input {
  border: 1px solid rgb(218, 216, 216);
  height: 26px;
  border-radius: 5px;
  margin-left: 8px;
  padding-left: 5px;
  font-size: 12px;
  outline-color: rgb(179, 175, 175);
}

.el-card.add-card {
  --el-card-padding: 0;
  height: 55px;
  margin: 10px 0;
  /* width: 98%; */
  padding: 0 20px;
  box-sizing: border-box;
}

.el-card.add-card .el-card__body {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-card.add-card .el-card__body div:first-child span {
  margin-left: 10px;
}

.pagination {
  height: 40px;
  margin: 10px;
  padding-bottom: 10px;
  float: right;
}

.el-button--small {
  padding: 0;
}

.demo-form-inline {
  padding: 20px 40px 0;
}
</style>
